@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  * {
    @apply border-border;
  }
  
  body {
    @apply bg-gradient-to-br from-blue-50 to-indigo-100 font-sans;
    margin: 0;
    padding: 0;
    min-height: 100vh;
  }
  
  html {
    scroll-behavior: smooth;
  }
}

@layer components {
  .card {
    @apply bg-white rounded-xl shadow-lg border border-gray-100;
  }
  
  .btn-primary {
    @apply bg-gradient-to-r from-primary-500 to-primary-600 text-white px-6 py-3 rounded-lg font-medium shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200;
  }
  
  .btn-secondary {
    @apply bg-white text-primary-600 px-6 py-3 rounded-lg font-medium border border-primary-200 hover:bg-primary-50 transition-all duration-200;
  }
  
  .timeline-item {
    @apply relative pl-8 pb-8 border-l-2 border-primary-200;
  }
  
  .timeline-item::before {
    @apply absolute -left-2 top-2 w-4 h-4 bg-primary-500 rounded-full;
    content: '';
  }
  
  .timeline-item:last-child {
    @apply border-l-0;
  }
}

@layer utilities {
  .text-gradient {
    @apply bg-gradient-to-r from-primary-600 to-suzhou-600 bg-clip-text text-transparent;
  }
  
  .shadow-soft {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  }
  
  .backdrop-blur-soft {
    backdrop-filter: blur(10px);
  }
}